<template>
    <view class="mine p_t_10">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <text>购物车</text>
        </view>
        <!-- <view class="custom-left" :style="'top:' + customTop + 'px'">
                <u-icon name="arrow-left" color="#fff" size="20" @click="goBack"></u-icon>
            </view> -->
        <view class="main">
            <view class="header" :style="'padding-top:' + titleHeight + 'px'"></view>
        </view>
        <view class="index" v-if="goodsList.length > 0">
            <u-checkbox-group v-model="ids" placement="column" shape="circle">
                <view class="goodsList">
                    <view v-for="(item,index) in goodsList" :key="index">
                        <view class="order">
                            <u-checkbox :customStyle="{marginBottom: '8px'}" :name="item.shoppingCartId"
                                        activeColor="red"
                                        @change="checkboxChangeItem(item.shoppingCartId,item.price,item.num)">
                            </u-checkbox>
                            <view @click="goInfo(item.goodsId)">
                                <u-image :showLoading="true" :src="item.urlLink" width="160rpx" height="160rpx"
                                         radius="10rpx"></u-image>
                            </view>
                            <view class="goodsInfo" @click="goInfo(item.goodsId)">
                                <view>
                                    <text style="font-weight: 700;font-size:30rpx" class="wordLimit">{{ item.name }}
                                    </text>
                                    <u--text :text="item.goodsCategory" type="info" size="12"></u--text>
                                </view>
                                <view class="goodsBottom">
                                    <text class="price">单价: {{ item.price }}</text>
                                    <text class="price">数量: {{ item.num }}</text>
                                    <view class="money">
                                        <view style="font-weight: 700;">
                                            <text style="font-size: 20rpx;">¥</text>
                                            {{ item.price * item.num }}
                                        </view>
                                    </view>
                                    <!-- <u-image :showLoading="true" src="/static/img/shopping-car.png" width="50rpx" height="50rpx" @click="addCart(item.goodsId)"></u-image> -->
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </u-checkbox-group>
        </view>
        <view v-else class="bottom-empty">
            <s-empty/>
        </view>
        <view class="bottom">
            <view class="bottom-box">
                <u-checkbox-group placement="column" v-model="idsAll" @change="checkboxChange" shape="circle">
                    <u-checkbox :customStyle="{marginBottom: '8px'}" :name="1" activeColor="red" label="全选"
                                labelColor="#fff" labelSize="24rpx">
                    </u-checkbox>
                </u-checkbox-group>
                <view class="bottom-left">
                    合计:
                    <text style="color: #fa3534;font-size: 30rpx;font-weight: 700;margin: 0 10rpx;">¥</text>
                    <text style="color: #fa3534;font-size: 38rpx;font-weight: 700;">
                        {{ Number(totalPrice).toFixed(2) }}
                    </text>
                </view>
                <view class="buyBut dis_f_r_c">
                    <!--                    <view class="buy-box" style="background: #3c9cff" @click="addOrder">结算</view>-->
                    <view class="buy-box" style="background: #3c9cff" @click="showOrder=true">结算</view>
                    <view class="buy-box m_l_10" @click="handleRemove">删除</view>
                </view>
            </view>
        </view>
        <u-popup :show="showOrder" :round="10" closeable @close="showOrder=false" mode="bottom">
            <view class="p_20">
                <view class="dis_f_c_c">订单确认</view>
                <u--form labelPosition="left" labelWidth="70" :model="model1" :rules="rules" ref="uForm">

                    <u-form-item prop="userInfo.phone" ref="item1" label="手机号">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.phone" placeholder="请填写手机号" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameIdNo" ref="item1" label="游戏ID">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.gameIdNo" placeholder="请填写游戏ID"
                                     border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.gameAreaType" ref="item1" label="游戏区服">
                        <view class="item-box">
                            <u-input v-model="model1.userInfo.gameAreaType" placeholder="请填写游戏区服"
                                     border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item prop="userInfo.remark" ref="item1" label="备注">
                        <view class="item-box">
                            <!--                            <u-icon name="phone" :color="mainColor" size="28"></u-icon>-->
                            <u-input v-model="model1.userInfo.remark" placeholder="请填写备注" border="none"></u-input>
                        </view>
                    </u-form-item>
                    <u-form-item label="支付方式" prop="userInfo.payType">
                        <u-radio-group v-model="model1.userInfo.payType">
                            <u-radio shape="circle" label="微信" name="1"></u-radio>
                            <u-radio shape="circle" label="余额" name="2"
                                     :customStyle="{marginLeft: '8px'}"></u-radio>
                        </u-radio-group>
                    </u-form-item>
                </u--form>
                <view class="m_t_10">
                    <u-button type="primary" @click="handleConfirm">提交</u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import {
    getCartApi,
    addCartByCartApi,
    removeCartApi,
    postAddOrderApi, addCartByPayCartApi,
} from "@/sheep/api/index";
import {xcxTopUp, subscribe} from "@/sheep/utils/wxUtil";

export default {
    data() {
        return {
            showOrder: false,
            radiolist: [],
            goods: {
                goodsId: "",
                name: "",
                price: 0,
                vipPrice: 0,
                num: 0,
                urlLink: "",
                info: "",
                infoDesc: "",
            },
            model1: {
                userInfo: {
                    phone: "",
                    gameIdNo: "",
                    remark: "",
                    gameAreaType: "",
                    payType: "",
                },
            },
            rules: {
                "userInfo.phone": {
                    type: "string",
                    required: true,
                    message: "请输入手机号",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameIdNo": {
                    type: "string",
                    required: true,
                    message: "请输入游戏ID",
                    trigger: ["blur", "change"],
                },
                "userInfo.gameAreaType": {
                    type: "string",
                    required: true,
                    message: "请输入游戏区服",
                    trigger: ["blur", "change"],
                },
                "userInfo.payType": {
                    type: "string",
                    required: true,
                    message: "请选择支付方式",
                    trigger: ["blur", "change"],
                },
            },
            ids: [],
            idsAll: [],
            titleHeight: 0,
            customTop: 0,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            goodsList: [],
            totalPrice: 0.0,
        };
    },
    onLoad() {
        this.getHeight();
    },
    onShow() {
        this.ids = [];
        this.idsAll = [];
        this.paramsPage = {
            pageNum: 1,
            pageSize: 10,
        };
        this.goodsList = [];
        this.totalPrice = 0.0;
        this.getCartList();
    },
    methods: {
        handleRemove() {
            console.log("ids", this.ids);
            if (this.ids.length <= 0) {
                uni.showToast({
                    title: "请选择要删除的商品",
                    icon: "none",
                });
            } else {
                uni.showModal({
                    title: "提示",
                    content: "确定要删除吗？",
                    success: (res) => {
                        if (res.confirm) {
                            removeCartApi(this.ids.toString()).then((res) => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        title: res.msg,
                                        icon: "none",
                                    });
                                    this.ids = [];
                                    this.idsAll = [];
                                    this.totalPrice = 0;
                                    this.getCartList();
                                }
                            });
                        }
                    },
                });
            }
        },
        addOrder() {
            this.ids.forEach((id) => {
                addCartByCartApi(id).then((res) => {
                    if (res.code == 200) {
                        uni.navigateTo({
                            url: "/pages/order/index?type=1",
                        });
                    }
                });
            });
        },
        handleConfirm() {
            this.$refs.uForm.validate().then((res) => {
                let shoppingCartId = this.ids.map((item) => {
                    return item;
                });
                this.model1.userInfo.shoppingCartId = shoppingCartId.toString();
                if (this.model1.userInfo.payType == '2') {
                    addCartByCartApi(this.model1.userInfo).then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: "none",
                        });
                        if (res.code == 200) {
                            subscribe(["ILyPPtKVkWDgrHRhg8ReZnqVdnLjlABSL6jQig7X3ec"]).then((res) => {
                                    this.showOrder = false;
                                    //延迟两秒
                                    setTimeout(() => {
                                        uni.navigateTo({
                                            url: "/pages/order/index?type=0",
                                        });
                                    }, 1500);
                                }
                            );
                        }
                    });
                } else {
                    addCartByPayCartApi(this.model1.userInfo).then((res) => {
                        if (res.code == 200) {
                            xcxTopUp(res.data.price, res.data.buyFlag, 'shop', '购物车支付').then((payRes) => {
                                if (payRes) {
                                    subscribe(["ILyPPtKVkWDgrHRhg8ReZnqVdnLjlABSL6jQig7X3ec"]).then(() => {
                                            this.showOrder = false;
                                            //延迟两秒
                                            setTimeout(() => {
                                                uni.navigateTo({
                                                    url: "/pages/order/index?type=0",
                                                });
                                            }, 1500);
                                        }
                                    );
                                }
                            });
                        }
                    });

                }


            });
        },
        checkboxChange() {
            if (this.ids.length != this.goodsList.length) {
                this.ids = [];
                this.totalPrice = 0.0;
                for (let i = 0; i < this.goodsList.length; i++) {
                    this.ids.push(this.goodsList[i].shoppingCartId);
                    this.totalPrice =
                        Number(this.totalPrice) +
                        Number(this.goodsList[i].price) * this.goodsList[i].num;
                }
            } else {
                this.ids = [];
                this.totalPrice = 0.0;
            }
        },
        checkboxChangeItem(shoppingCartId, price, num) {
            const flag = this.ids.includes(shoppingCartId);
            if (flag) {
                this.totalPrice = this.totalPrice - Number(price) * num;
                this.idsAll = [];
            } else {
                this.totalPrice = Number(this.totalPrice) + Number(price) * num;
                if (this.ids.length + 1 == this.goodsList.length) {
                    this.idsAll.push(1);
                }
            }
            this.totalPrice = Number(this.totalPrice).toFixed(2);
        },
        getCartList() {
            getCartApi(this.query).then((res) => {
                this.goodsList = res.data;
            });
        },
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + 10;
            this.customTop = res.top + 3;
        },
        goBack() {
            uni.navigateBack();
        },
        goInfo(goodsId) {
            uni.navigateTo({
                url: "/pages/index/info?goodsId=" + goodsId,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.mine {
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative;

    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .custom-left {
        position: absolute;
        left: 30rpx;
        transform: translate(0, 20%);
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .main {
        padding: 0 10rpx;

        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;

            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png") no-repeat;
                background-size: 100% auto;
                // background: #222020;
            }
        }
    }

    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;

        .goodsList {
            flex: 1;
            height: 100%;
            overflow: auto;

            .order {
                padding: 15rpx 30rpx;
                margin-top: 20rpx;
                padding: 30rpx;
                background-color: #fff;
                border-radius: 20rpx;
                display: flex;
                align-items: center;

                .goodsInfo {
                    flex: 1;
                    padding: 0 0 0 15rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 160rpx;
                    color: #000;

                    .wordLimit {
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        /* 设置最大显示行数 */
                        -webkit-box-orient: vertical;
                        text-overflow: ellipsis;
                    }

                    .goodsBottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            font-size: 24rpx;
                        }

                        .money {
                            color: #fa3534;
                            // margin-top: 8rpx;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                        }
                    }

                    .shop-name {
                        margin-top: 10rpx;
                        font-size: 24rpx;
                        color: #999;
                        display: flex;
                        align-items: center;
                        background: #ce3a3a;
                        padding: 5rpx 10rpx;
                        border-radius: 5rpx;
                    }
                }
            }
        }
    }

    .bottom-empty {
        margin-top: 50%;
    }

    .bottom {
        position: fixed;
        bottom: 0;
        z-index: 99;
        left: 0;
        right: 0;
        background-color: #fff;
        height: 140rpx;

        .bottom-box {
            height: 140rpx;
            display: flex;
            align-items: center;
            margin: 0 50rpx;
            justify-content: space-between;

            .bottom-left {
                display: flex;
                //flex-direction: column;
                align-items: center;
                justify-content: center;
                font-size: 26rpx;
                font-weight: 700;
                // color: #999;
            }

            .buyBut {
                .buy-box {
                    background-color: #fa3534;
                    color: #ffffff;
                    /* width: 160rpx;
                                        height: 80rpx;*/
                    border-radius: 40rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: 700;
                    font-size: 30rpx;
                    padding: 12rpx 25rpx;
                }
            }
        }
    }
}
</style>
